<?php 
	$message = $this->message;
?>

<section class="grid_12" style="width: 60%;margin-left: 20%;">
	<div class="block-border" style="margin-bottom: 20px;">
	       <form class="block-content form" id="add_form" method="post" action="">
				
				<h1>登録</h1>
				
				<fieldset> 
					<legend>個人情報</legend>

					<!-- Message display -->
					<?php if($message):?>
					<ul class="message error no-margin">
						<li><?php echo $message?></li>
					</ul>
					<?php endif;?>

					<p class="inline-label">
						<label for="username">ユーザ名</label>
						<?php echo $this->formText("username", $this->username);?>
					</p>
					
					<p class="inline-label">
						<label for="password">パスワード</label>
						<?php echo $this->formText("password");?>
					</p>
					
					<p class="inline-label">
						<label for="password">パスワード承認</label>
						<?php echo $this->formText("password_confirm");?>
					</p>
					
					<p class="inline-label">
						<label for="name">名前</label>
						<?php echo $this->formText("name", $this->name);?>
					</p>
					
					<p class="inline-label">
						<label for="email">メールアドレス</label>
						<?php echo $this->formText("email", $this->email);?>
					</p>
					
					<p class="inline-label">
						<label for="phone">電話番号</label>
						<?php echo $this->formText("phone", $this->phone);?>
					</p>
				</fieldset>

				<fieldset class="grey-bg no-margin">
					<p>
						<button type="submit">登録</button>
						<button type="button" id="cancel-btn">キャンセル</button>
					</p>
				</fieldset>
				
			</form>
		</div>
</section>

<!-- Table script -->
<script type="text/javascript">
$(document).ready(function(){	
	$("#cancel-btn").click(function(){
		windown.location = "/";
		return false;
	});

	//入力を検証する
	$("#add_form").validate({
 		rules: {
			username: {
 				required: true,
 				remote: {
 			        url: "/admin/user/is-username-exist",
 			        type: "post",
 			        data: {
 			          username: function() {
 			            return $("#username").val();
 			          }
 			        }
 				}
 			},
 			name: {
 				required: true
 			},
 			email: {
 	 			required: true,
 	 			email: true,
 	 			remote: {
 			        url: "/admin/user/is-email-exist",
 			        type: "post",
 			        data: {
 			          username: function() {
 			            return $("#email").val();
 			          }
 			        }
 				}
 			},
			phone: {
				required: true,
				number: true,
				minlength: 9,
				maxlength: 11
			}
		},
		messages: {
			username: {
				required: "このフィールドは必須です。",
				remote: "このユーザ名が存在しました"
			},
			name: "このフィールドは必須です。",
			email: {
				required: "このフィールドは必須です。",
				email: "有効なメールアドレスを入力してください。",
				remote: "このメールアドレスが存在しました"
			},
			phone: {
				required: "このフィールドは必須です。",
				number: "有効な番号を入力してください。",
				minlength: "少なくとも9文字を入力してください。",
				maxlength: "以上11文字以下を入力してください。"
			}
		}
	});
});
</script>
